<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: inkux
  Date: 2018/5/10
  Time: 16:18
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html>
<head>
	<title>Ant Express Login</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/logintest.css">
	<script src="${pageContext.request.contextPath}/js/lib/jquery-3.3.1.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/lib/md5.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/passwords.js"></script>
	<script>
		$(document).ready(function () {
			$("#login_form").submit(function () {
				$.ajax({
						url: "/login/ajax",
						data: {
							username: $("#username").val(),
							// TODO add salt
							password: getEncodedPassword($("#password").val()),
							captcha: $("#captcha").val()
						},
						type: "post",
						dataType: "json",
						success: function (data) {
							if (data.login == "ok") {
								window.location = "admin/index";
							}
							else if (data.login == "invalid_credentials") {
								$("#invalid_credentials").removeAttr("hidden");
								$("#captcha_error").attr("hidden", "true");
								refreshCaptcha();
							}
							else if (data.login == "captcha_error") {
								$("#captcha_error").removeAttr("hidden");
								$("#invalid_credentials").attr("hidden", "true");
								refreshCaptcha();
							}
						},

						error: function (jqHXR, textStatus, error) {
							console.log(error);
							refreshCaptcha();
						}
					}
				);
				return false;
			});

			$("#captcha_img").click(function () {
				refreshCaptcha();
			});

			function refreshCaptcha() {
				$("#captcha_img").attr("src", "${pageContext.request.contextPath}/captcha?" + new Date().getTime());
				$("#captcha").val("");
			}
		});
	</script>
</head>
<body>
<div class="banner1">
	Login to Ant Express
</div>
<div class="banner2">
	Sign in with your Admin account
</div>
<form id="login_form" action="login/ajax" method="post">
	<div class="login">
		<div class="avatar">
			<img id="avatar" src="${pageContext.request.contextPath}/avatar.png" alt="avatar" height="128" width="128"><br>
			<span id="username_hint" class="hint">Welcome!</span>
		</div>
		<div class="inputs">
			<input id="username" name="username" type="text" placeholder="Username"><br>
			<input name="password" type="password" id="password" placeholder="Password"><br>
			<div id="captcha_group_div" style="vertical-align: center;">
				<input id="captcha" name="captcha" type="text" placeholder="Captcha" style="margin: auto;">
				<div id="captcha_div" style="display: inline;cursor: pointer;" title="Refresh Captcha">
					<img id="captcha_img" src="${pageContext.request.contextPath}/captcha" alt="Captcha">
				</div>
				<p style="font-size: small; color: #8a8a8a;">
					<span style="font-family: 'Courier New';">[o,O,0],[l,I,1]</span>
					are the same
				</p>
			</div>
			<div>
				<input id="remember_me" name="remember" type="checkbox">
				<label for="remember_me">Remember me for 7 days</label>
			</div>
		</div>
		<p id="invalid_credentials" hidden style="color: red;">Invalid Username or Password</p>
		<p id="captcha_error" hidden style="color: red;">Invalid Captcha</p>
		<div class="login">
			<input id="login_btn" type="submit" value="Login">
		</div>
	</div>
</form>
</body>
</html>
